import { NavBar, DatePicker } from 'antd-mobile'
import './index.scss'
import {useEffect, useMemo, useState} from "react";
import classNames from "classnames";
import dayjs from "dayjs";
import {useSelector} from "react-redux";
import _ from "lodash";
import DayBill from "@/pages/Month/components/DayBill";


const Month = () => {
  const [dateVisible,setDateVisible]=useState(false)
  const [currentDate,setCurrentDate]=useState(dayjs(new Date()).format('YYYY | MM'))

  const {billList}=useSelector(state => state.bill)
  const monthGroup=useMemo(()=>{
    return _.groupBy(billList,(item)=>dayjs(item.date).format('YYYY | MM'))
  },[billList])

  const [monthList,setMonthList]=useState([])
  const monthResults=useMemo(()=>{
    const income=monthList.filter(item=>item.type==='income').reduce((a,c)=>a+c.money,0)
    const pay=monthList.filter(item=>item.type==='pay').reduce((a,c)=>a+c.money,0)
    return{
      income,
      payReal:-pay,
      total:income+pay
    }
  },[monthList])
  console.log(monthResults)

  useEffect(()=>{
    setMonthList(monthGroup[currentDate]||[])
  },[monthGroup])

  const dayGroup=useMemo(()=>{
    const dayList=_.groupBy(monthList,(item)=>dayjs(item.date).format('YYYY | MM-DD'))
    const keys=Object.keys(dayList)
    return {
      dayList,
      keys
    }
  },[monthList])
  console.log(dayGroup)


  const onConfirm=(data)=>{
    console.log(data)
    const formatDate=dayjs(data).format('YYYY | MM')
    setCurrentDate(formatDate)
    setMonthList(monthGroup[formatDate]||[])
  }
  return (
    <div className="monthlyBill">
      <NavBar className="nav" backArrow={false}>
        月度收支
      </NavBar>
      <div className="content">
        <div className="header">
          {/* 时间切换区域 */}
          <div className="date" onClick={()=>setDateVisible(true)}>
            <span className="text">
              {currentDate}月账单
            </span>
            <span className={classNames('arrow',dateVisible&&'expand')}></span>
          </div>
          {/* 统计区域 */}
          <div className='twoLineOverview'>
            <div className="item">
              <span className="money">{monthResults.payReal.toFixed(2)}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{monthResults.income.toFixed(2)}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{monthResults.total.toFixed(2)}</span>
              <span className="type">结余</span>
            </div>
          </div>
          {/* 时间选择器 */}
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            visible={dateVisible}
            onConfirm={onConfirm}
            onClose={()=>setDateVisible(false)}
            max={new Date()}
          />
        </div>
        {
          dayGroup.keys.map(key=>{
            return <DayBill key={key} date={key} billList={dayGroup.dayList[key]}/>
          })
        }

      </div>
    </div >
  )
}

export default Month